<template>
  <div>
    <el-input
      v-model="columnName"
      clearable
      size="small"
      prefix-icon="el-icon-search"
      style="width:100%;margin-bottom: 20px"
      placeholder="输入关键字进行过滤"
    >
    </el-input>
    <el-tree
     node-key="id"
      ref="tree"
      empty-text=""
      :data="treeData"
      :load="loadNode"
      lazy
      @node-click="getDefineNode"
      :show-checkbox="showcheckbox"
      @check-change="handleCheckChange"
      :filter-node-method="filterNode"
      draggable
      :expand-on-click-node="false"
      :props="props"
    >
    </el-tree>
  </div>
</template>

<script>
import { listZone } from "@/api/quota/theme_zone/zone.js";
import { getSetList } from "@/api/quota/theme_zone/set.js";
import { getDefineByTheme } from "@/api/quota/define/define.js";
// import  draggable from 'vuedraggable';
export default {
  props:{
    showcheckbox:{
      type:Boolean,
      default:true
    }

  },
  data() {
    return {
      props: {
        label: "name",
        isLeaf: "leaf",
      },
      //选中指标ID
      ids:[],
      //选中指标
      quotas:[],
      //选中节点
      name: "",
      columnName: undefined,
      treeData: undefined,
      checkedNodes: [],
      node_had: [], // 触发 tree 的 :load=loadNode 重复触发  动态更新tree
      resolve_had: [],
      setParams: {
        parentId: null,
        zoneId: null,
      },
      quotaParams: {
        themeSetId: null,
      },
    };
  },
  watch: {
      columnName(val) {
        this.$refs.tree.filter(val);
      }
    },
  methods: {
    //获取预指标节点
    getDefineNode(val){
      if(val.category==='主题'){
        this.$emit('themeNode',val)
      }
      //  if(val.isQuota){
      //    this.$emit('computedQuota',val)
      //  }
    },
    //清空树
      resetTree(){
        this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([])});
      },
    //过滤node
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1
    },
    //按层级进行懒加载
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.node_had = node; //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
        this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起来
        listZone({ pageNum: 1, pageSize: 1000 }).then((response) => {
          if (response.code === 0) {
            let arr = [];
            let ds = response.data.list;
            ds.forEach((item) => {
              this.setParams.zoneId = item.id;
              arr.push({ name: item.zoneTitle + "(主题域)", id: item.id });
            });
            return resolve(arr);
          }
        });
      }
      if (node.level === 1) {
        this.setParams.zoneId = node.data.id;
        this.setParams.parentId = null;
        getSetList(this.setParams).then((response) => {
          if (response.code === 0) {
            let arr = [];
            let ds = response.data;
            ds.forEach((item) => {
              arr.push({
                name: `${item.setTitle}(${item.category})`,
                id: item.id,
                zoneId: item.zoneId,
                category: item.category,
              });
            });
            resolve(arr);
          }
        });
      }
      if (node.level >= 2) {
        this.quotaParams.themeSetId = node.data.id;
        if (node.data.category === "主题") {

            return resolve([]);

        } else if (node.data.category === "主题集") {
          this.setParams.parentId = node.data.id;
          this.setParams.zoneId = node.data.zoneId;
          getSetList(this.setParams).then((response) => {
            if (response.code === 0) {
              let arr = [];
              let ds = response.data;
              ds.forEach((item) => {
                arr.push({
                  name: `${item.setTitle}(${item.category})`,
                  id: item.id,
                  zoneId: item.zoneId,
                  category: item.category,
                });
              });
              resolve(arr);
            }
          });
        }
      }
    },
    //选中指标加载默认维度
    handleCheckChange(data, checked, indeterminate){
      if(data.isQuota){
        if(checked){
          this.ids.push(data.id)
          this.$emit("sendIds",this.ids)
          this.quotas.push({id:data.id,name:data.name})
          this.$emit("sendQuotas",this.quotas)

        }else{
          let index = this.ids.indexOf(data.id)
          this.ids.splice(index,1)
          this.$emit("sendIds",this.ids)
          let idx = this.quotas.findIndex(item => {
            return item.id === data.id
          })
          this.quotas.splice(idx,1)
          this.$emit("sendQuotas",this.quotas)
        }

      }
    }
  },

};
</script>

<style scoped>
</style>

